import React, { memo, useCallback, useState } from 'react'
import { useNavigate } from 'react-router';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { Input } from 'antd';
import { SearchOutlined } from '@ant-design/icons'
import { navigatorData } from '../../commom/local-data'
import {
    AppHeaderWrapper,
    AppHeaderLeftWrapper,
    AppHeaderRightWrapper,
    ResultWrapper
} from './style'
import { getSearchSuggestionAction } from '@/pages/search/store/actionCreators';
export default memo(function AppHeader() {
  const [isShowSuggest, setIsShowSuggest] = useState(false);
  const navigate = useNavigate()
  const [currentIndex, setCurrentIndex] = useState(0)
  const navigateTo = (url, index) => {
    setCurrentIndex(index)
    navigate(url)
  }
  const dispatch = useDispatch()
  const inputChange = useCallback(e => {
    const value = e.target.value
    setIsShowSuggest(!!value)
    if (!value) return 
    dispatch(getSearchSuggestionAction(value))
  }, [dispatch])
  const goToSearch = useCallback(e => {
    const keywords = e.target.value
    if(!keywords) return
    navigate(`/search/${keywords}/1`)
    setIsShowSuggest(false)
  },[navigate])
  const { searchSuggest } = useSelector(state => ({
    searchSuggest:state.getIn(['search','searchSuggest'])
  }), shallowEqual)
  const renderTitle = title => {
    switch (title) {
      case 'songs':
        return (
          <dt>
            <i className='sprite_icon2 icon'></i>
            <span>单曲</span>
          </dt>
        )
      case 'artists':
        return (
          <dt>
            <i className='sprite_icon2 icon'></i>
            <span>歌手</span>
          </dt>
        )
      case 'albums':
        return (
          <dt>
            <i className='sprite_icon2 icon'></i>
            <span>专辑</span>
          </dt>
        )
      default:
        return (
          <dt>
            <i className='sprite_icon2 icon'></i>
            <span>歌单</span>
          </dt>
        )
    }
  }
    return (
     <AppHeaderWrapper>
        <div className="wrap-v1 content">
          <AppHeaderLeftWrapper>
            <div className='logo sprite_01'>
              <a href="t"> </a>
            </div> 
            <div className="list">
              {
                navigatorData.map((item,index) => {
                return (
                  <div key={item.title} className={`list_item ${currentIndex === index ? 'active':''}`} onClick={e => navigateTo(item.url,index)}>
                    {/* <NavLink to={item.url}>{item.title}</NavLink> */}
                    <span>{item.title}</span>
                  </div>
                )
                })
              }
            </div>
          </AppHeaderLeftWrapper >
          <AppHeaderRightWrapper className="operation">
            <div className="search">
              <Input placeholder="音乐/视频/电台/用户" prefix={<SearchOutlined />} onChange={inputChange} onPressEnter={goToSearch}/>
            </div>
            <div className="center">创作者中心</div>
            <div className="btn">登录</div>
            {
              !isShowSuggest? null :
                <ResultWrapper className="result">
                  {
                    searchSuggest?.order?.map((title,index) => {
                      return (
                        <dl key={title} className={'item'+index}>
                          {
                            renderTitle(title)
                          }
                          <dd className='right'>
                            {
                              searchSuggest[title].map(item => {
                                return (
                                  <div key={item.id} className='item text-nowrap'>{item.name}</div>
                                )
                              })
                            }
                          </dd>
                        </dl>
                      )
                    })
                  }
                </ResultWrapper>
            }
          </AppHeaderRightWrapper>
        </div>
        <div className="line"></div>
      </AppHeaderWrapper>
    )
})